/**
 * 工作经历
 */
import React from 'react';
import { Form, Input, Radio, Button, Icon } from 'antd';
import { FormHeader, FormLayout, BoxRemove } from '../../components';
import { requireRule } from './util';
import { SelectDict } from '../select';
import RangePicker from './RangePicker';

function ResumeWorkInfoItem({ form, index, onRemove }) {
    const { getFieldDecorator } = form;

    return (
        <BoxRemove
            onRemove={() => {
                onRemove(index);
            }}
        >
            <FormLayout type="col2">
                <Form.Item label="公司性质" style={{ display: 'none' }}>
                    {getFieldDecorator(`workInfoCompanyNature[${index}]`)(<Input />)}
                </Form.Item>
                <Form.Item label="起止时间">
                    {getFieldDecorator(`workInfoStartTime[${index}]`, {
                        rules: requireRule('请输入起止时间')
                    })(<RangePicker />)}
                </Form.Item>
                <Form.Item label="行业">
                    {getFieldDecorator(`workInfoIndustryType[${index}]`, {
                        rules: requireRule('请输入行业')
                    })(<SelectDict code="industryType" />)}
                </Form.Item>
                <Form.Item label="公司">
                    {getFieldDecorator(`workInfoCompanyName[${index}]`, {
                        rules: requireRule('请输入公司')
                    })(<Input placeholder="请输入" />)}
                </Form.Item>
                <Form.Item label="所在部门">
                    {getFieldDecorator(`workInfoDepartmentName[${index}]`, {
                        rules: requireRule('请输入所在部门')
                    })(<Input placeholder="请输入" />)}
                </Form.Item>
                <Form.Item label="职位">
                    {getFieldDecorator(`workInfoPositionName[${index}]`)(<Input placeholder="请输入" />)}
                </Form.Item>
                <Form.Item label="离职原因">
                    {getFieldDecorator(`workInfoLeaveReason[${index}]`)(<Input placeholder="请输入" />)}
                </Form.Item>
            </FormLayout>
            <FormLayout type="full">
                <Form.Item label="工作职责">
                    {getFieldDecorator(`workInfoWorkDesc[${index}]`)(
                        <Input.TextArea maxLength={20000} rows={7} placeholder="请输入" />
                    )}
                </Form.Item>
            </FormLayout>
        </BoxRemove>
    );
}

export default function ResumeWorkInfo({ form }) {
    const { getFieldDecorator, getFieldValue } = form;
    const talentWorkType = getFieldValue('talentWorkType') || '1';

    const keys = getFieldValue('workInfoKeys') || [];
    getFieldDecorator('workInfoKeys', { initialValue: [] });

    const renderItems = () =>
        keys.map(k => (
            <ResumeWorkInfoItem
                form={form}
                key={k}
                index={k}
                onRemove={_k => {
                    form.setFieldsValue({
                        workInfoKeys: keys.filter(key => key !== _k)
                    });
                }}
            />
        ));

    return (
        <div style={{ marginBottom: 24 }}>
            <FormHeader title="工作经历" id="resume-workInfo" />
            <FormLayout type="full">
                <Form.Item label="工作经历">
                    {getFieldDecorator('talentWorkType', { initialValue: '1' })(
                        <Radio.Group>
                            <Radio value="1">有工作经历</Radio>
                            <Radio value="2">应届生</Radio>
                            <Radio value="3">在校生</Radio>
                        </Radio.Group>
                    )}
                </Form.Item>
            </FormLayout>
            <div style={{ display: talentWorkType === '1' ? 'block' : 'none' }}>
                {renderItems()}
                <Button
                    block
                    onClick={() => {
                        const nextKeys = keys.concat(keys.length);
                        form.setFieldsValue({
                            workInfoKeys: nextKeys
                        });
                    }}
                >
                    <Icon type="plus" />
                    添加工作经历
                </Button>
            </div>
        </div>
    );
}
